<!--
/**
* Author: linchun
* Date: 2022-07-26 19:37
* Desc: 用户协议 userAgree
*/
-->
<template>
  <zm-popup class="userAgree" v-model="show" :closeable="false" :round="20" :mode="'center'">
    <view class="content-box">
      <view class="title">{{ title }}</view>
      <!--#ifdef MP-ALIPAY-->
      <rich-text class="content overflow-auto" :nodes="getRichText()" />
      <!--#endif-->
      <!--#ifndef MP-ALIPAY-->
      <view class="content overflow-auto" v-html="content"></view>
      <!--#endif-->
      <yy-button
        :custom-style="{
          height: '80rpx',
          borderRadius: '20rpx',
          fontSize: '32rpx',
          marginTop: '50rpx'
        }"
        @click="show = false"
        >我知道了</yy-button
      >
    </view>
  </zm-popup>
</template>

<script>
  import ZmPopup from '@/commons/ZmPopup'
  // #ifdef MP-ALIPAY
  import parseHtml from '@/utils/htmlParser'
  // #endif
  export default {
    name: 'UserAgree',
    components: { ZmPopup },
    props: {
      value: {
        type: Boolean,
        required: true
      },
      title: String,
      content: String
    },
    data() {
      return {}
    },
    computed: {
      show: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      }
    },
    methods: {
      getRichText() {
        return parseHtml(this.content)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .content-box {
    padding: 66rpx 40rpx 40rpx 40rpx;
    width: 560rpx;
    height: 800rpx;
    // height: auto;
    box-sizing: border-box;
    background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/login-userAgree-bg.png') no-repeat right top;
    background-size: 138rpx 105rpx;
    border-top-right-radius: 20px;
    display: flex;
    flex-direction: column;
  }

  .title {
    color: $blue;
    font-size: 40rpx;
    text-align: center;
  }

  .content {
    margin-top: 40rpx;
    padding-right: 5rpx;
    flex: 1;
    font-size: 26rpx;
    // color: $gray;
  }
</style>
<style lang="scss">
  // .userAgree {
  //   &.van-popup--center.van-popup--round {
  //     border-radius: 10rpx !important;
  //   }
  // }
</style>
